import { useState } from "react";

export default function TaskList(props) {
  const { list, isCheckedAll, onChange, onChangeAll, onDelete, onChangeTitle } =
    props;

  // 表示当前操作的待办项，
  //    { id: 1, title: '吃饭', done: false }
  //    { id: 2, title: '睡觉', done: false}
  //    null 表示当前没有正在操作的待办项
  const [curTask, setCurTask] = useState(null);

  function handleChange(id, event) {
    // 1. 获取当前元素是勾选还是取消勾选
    const checked = event.target.checked;
    console.log("checked", checked, id);

    // 2. 调用父组件的 onChange 方法
    onChange(id, checked);
  }

  function handleChangeAll(event) {
    // 1. 获取到当前是勾选还是不勾选
    const checked = event.target.checked;
    console.log("checked", checked);
    // 要操作 tasks 中每一项的 done 都设置为 true or false
    //    该 tasks 数据是在 父组件App中的，所以需要去调用父组件传递过来的方法来修改。

    onChangeAll(checked);
  }

  function handleEdit(data) {
    console.log("data", data);
    // 将 data 赋值给 curTask
    setCurTask({ ...data });
  }

  function handleInputChange(event) {
    // setCurTask((curTask) => ({ ...curTask, title: event.target.value }));

    setCurTask((curTask) => ({ ...curTask, title: event.target.value }));
  }

  function handleSave() {
    // 处理保存
    // 将 当前 操作的 curTask 写入到 源头（tasks）中具体那个元素的
    // []

    // 调用父组件的 onChangeTitle 来修改
    onChangeTitle(curTask.id, curTask.title);

    // 修改完成之后，将 curTask 重置为 null ，表示编辑完成
    setCurTask(null);
  }

  return (
    <div className="list">
      <label>
        {/* 这里需要做成 受控组件，勾与不勾，必须完全由 isCheckedAll 来控制 
            不能使用 defaultChecked ,因为它只会在组件挂载阶段生效，后续更新阶段是不生效
        */}
        {/* <input type="checkbox" defaultChecked={isCheckedAll} /> */}

        <input
          type="checkbox"
          checked={isCheckedAll}
          onChange={handleChangeAll}
        />
        <span>全选/反选</span>
      </label>

      {list.map((item) => (
        <div key={item.id} className="item">
          <input
            type="checkbox"
            checked={item.done}
            onChange={(event) => handleChange(item.id, event)}
          />

          {curTask?.id === item.id ? (
            <input
              className="flex1"
              value={curTask.title}
              onChange={handleInputChange}
            />
          ) : (
            <div className="flex1">{item.title}</div>
          )}

          <div>
            {curTask?.id === item.id ? (
              <button onClick={() => handleSave()}>Save</button>
            ) : (
              <button onClick={() => handleEdit(item)}>Edit</button>
            )}

            <button onClick={() => onDelete(item.id)}>Delete</button>
          </div>
        </div>
      ))}
    </div>
  );
}
